<template>
    <div id="app" ref="app" :style="{
        top: top + 'px',
        left: left + 'px',
        width: width + 'px',
        height: height + 'px'
    }">
        <Cygames v-if="isCygames" @end="handleCygamesEnd"></Cygames>
        <Dialog v-model="isHint" message="请将设备设置为自动旋转并置为横屏，即将进入全屏模式以获取更好体验！" use-primary @primaryClick="primaryClick" @subClick="subClick" primary-btn-text="开启声音" sub-btn-text="关闭声音"></Dialog>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import Stage from '@/components/Stage.vue'
    import Cygames from "@/components/Cygames.vue";
    import Hint from '@/components/Hint.vue'
    import Dialog from "@/components/Dialog.vue";
    enum State {
        Start,
        Hint,
        Cygames,
        Next
    }
    @Component({
        components: {
            Dialog,
            Cygames,
            Hint,
            Stage
        },
    })
    export default class App extends Vue {
        state = State.Start;
        showDialog = true;
        show = false;
        top = 0;
        left= 0;
        width = 0;
        height = 0;
        mounted () {
            this.show = true;
            this.resize();
            window.addEventListener('resize', this.resize);
            setTimeout(() => {
                this.state = State.Hint;
            });
        }
        beforeDestroy () {
            window.removeEventListener('resize',this.resize );
        }
        resize () {
            const aspectRatio = window.innerWidth / window.innerHeight;
            const defaultAspectRatio = 13 / 6
            if(aspectRatio > defaultAspectRatio) {
                this.left = 0;
                this.width = Math.max(window.innerWidth, 600);
                this.height = this.width / defaultAspectRatio;
                this.top = (-this.height + window.innerHeight) / 2;
            } else {
                this.top = 0;
                this.height = window.innerHeight;
                this.width = this.height * defaultAspectRatio;
                this.left =(window.innerWidth - this.width)/2;

            }
        }
        primaryClick () {
            this.handleHintEnd();
        }

        subClick () {
            this.handleHintEnd();
        }
        get isHint () {
            return this.state === State.Hint;
        }
        get isCygames () {
            return this.state === State.Cygames
        }

        handleCygamesEnd () {
            this.state = State.Next;
        }
        get isMobile () {
            return navigator.userAgent.search(/android|ios/i)> -1;
        }
        afterFullScreenHook() {

        }
        handleHintEnd () {
            this.state = State.Cygames;
            if(this.isMobile) {
                (this.$refs.app as HTMLElement).requestFullscreen().then(() => {
                    this.afterFullScreenHook();
                }).catch(e => {
                    console.log(e);
                });
            }

        }
    }
</script>

<style lang="scss">
    @font-face {
        font-family: 'pcr';
        src: url("./assets/fonts/pcr.ttf");
    }
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        font-family: pcr ,serif;
        color: #454545;
        background: black;
    }

    #app {
        background: white;
        position: absolute;
        canvas {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
    }
</style>
